<template>
	<main>
		<v-header></v-header>
		<div class="con">
			<img src="../assets/images/download_banner.png" alt="">
		</div>
		<div class="list">
			<ul>
				<li>
					<a href="">
						<span class="music ifont"><i class="iconfont icon-yonghu"></i></span>
						<span class="i-text">美食</span>
					</a>
				</li>
				<li><a href=""><span class="movie ifont"><i class="iconfont icon-yonghu"></i></span><span class="i-text">猫眼电影</span></a></li>
				<li><a href=""><span class="hotel ifont"><i class="iconfont icon-hotel"></i></span><span class="i-text">酒店</span></a></li>
				<li><a href=""><span class="play ifont"><i class="iconfont icon-xiuxiankafeiyule"></i></span><span class="i-text">悠闲娱乐</span></a></li>
				<li><a href=""><span class="outeat ifont"><i class="iconfont icon-icon-test"></i></span><span class="i-text">外卖</span></a></li>
				<li><a href=""><span class="ktv ifont"><i class="iconfont icon-ktv"></i></span><span class="i-text">KTV</span></a></li>
				<li><a href=""><span class="run ifont"><i class="iconfont icon-zhoubianyou"></i></span><span class="i-text">周边游</span></a></li>
				<li><a href=""><span class="beatify ifont"><i class="iconfont icon-yonghu"></i></span><span class="i-text">丽人</span></a></li>
				<li><a href=""><span class="eat ifont"><i class="iconfont icon-icon-test1"></i></span><span class="i-text">小吃快餐</span></a></li>
				<li><a href=""><span class="plane ifont"><i class="iconfont icon-huochepiao"></i></span><span class="i-text">火车</span></a></li>
			</ul>
		</div>
		<div class="likelist">
			<h3>猜你喜欢</h3>
			<ul>
				<li v-for="(v,i) in datalist" @click="setNum(i)">
					<router-link to="/detail">
						<figure><img :src="v.img" alt=""></figure>
						<aside>
							<div class="name">{{v.name}}</div>
							<div class="position">{{v.title}}</div>
							<div class="price">
					            <span class="strong">{{v.price}}</span><span class="strong-color">元</span>
				                <del>161元</del>
					            <span class="line-right">
					                    {{v.rest}}
					            </span>
		        			</div>
						</aside>
					</router-link>
				</li>
			</ul>
		</div>
	</main>
</template>

<script>
	import header from "../components/header.vue"
	export default{
		name:"index",
		data(){
			return {
				datalist:""
			}
		},
		components:{
			"v-header":header
		},
		methods:{
			setNum(n){
				this.$store.state.num=n;
			}
		},
		mounted(){
			this.$store.state.index=1;
			this.$http.get("./static/data/like.json").then(function(res){
				console.log(res.body.data);
				this.datalist=res.body.data;
			})
		}
	}
</script>

<style scoped>
	.con{
		border-bottom: 1px solid #c6c0b3;
	}
	.con img{
	    width: 100%;
	    margin-bottom: -12px;
	}
	.list{
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
		border-bottom: 1px solid #c6c0b3;
		border-top: 1px solid #DDD8CE;
	    padding-bottom: 17px;
	    background: white;
	}
	.list .ifont{
	    width: 40px;
	    height: 40px;
	    display: block;
        background: #fd9d21;
	    text-align: center;
	    margin: 0 auto;
	    border-radius: 50%;
	}
	.list .ifont>i{
	    font-size: .48rem;
	    color: white;
	    line-height: .8rem;
	}
/* 	.list .ifont::before{
		font-size: 37px;
	    color: white;
	} */
	/* .list .music::before{
	   content: "\e694";   
	} */
	.list .i-text{
	    text-align: center;
		font-size: .24rem;
		color: #666;
	}
	.list .movie{
		background: #ff6767;
	}
	.list .hotel{
	    background: #8a90fa;
	}
	.list .play{
	    background: #fed030;
	}
	.list .outeat{
	    background: #fd9d21;
	}
	.list .ktv{
	    background: #fed030;
	}
	.list .run{
	    background: #4dc6ee;
	}
	.list .beatify{
	    background: #ff80c2;
	}
	.list .eat{
	    background: #fd9d21;
	}
	.list .plane{
		background: #599eec;
	}
	.list img{
	    width: .8rem;
	    height: 1rem;
	}
	.list ul li{
		float: left;
		font-size: .4rem;
		list-style: none;
		width: 20%;
		text-align: center;
	    margin-top: 20px;
	}
	.likelist{
		margin-top: 20px;
		background: white;
	    padding-left: .2rem;
	    border-top: 1px solid #DDD8CE;
	    margin-bottom: 1rem;
	}
	.likelist h3{
	    font-size: .34rem;
	    padding: .2rem 0;
	    color: #333;
	    border-bottom: 1px solid #DDD8CE;
	}
	.likelist ul li{
		display: flex;
		border-bottom: 1px solid #DDD8CE;
		padding: .2rem 0;
	}
	.likelist ul li>a{
		display: flex;
		flex-grow: 1;
	}
	.likelist figure{
	    width: 1.8rem;
	    height: 1.64rem;
	}
	.likelist figure img{
		width: 100%;
		height: 100%;
	}
	.likelist aside{
		flex-grow: 1;
		font-size: .3rem;
		padding-left: .2rem;
	}
	.likelist .name{
	    margin-bottom: .12rem;
	    font-size: .3rem;
	    font-weight: 400;
	    color: #333;
	}
	.likelist .position{
	    font-size: .24rem;
	    height: .68rem;
	    /* margin-bottom: .06rem; */
	    color: #666;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	}
	.likelist .price{
		color: #666;
	}
	.likelist .strong{
	    font-size: .38rem;
	    color: #06c1ae;
	}
	.likelist .strong-color{
	    font-size: .26rem;
	    color: #06c1ae;
	}
	.likelist del{
		text-decoration: none;
		font-size: .24rem;
	}
	.likelist del::before{
		content: "价格:";
	}
	.likelist .line-right{
		float: right;
		padding-right: .2rem;
		font-size: .24rem;
	}
</style>